<template>
	<div id="home">
		<nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
		<tab-control :titles="['流行', '新款', '精选']" ref="tabControl1" class="tab-control1" v-show="isMounting" @tabClick="tabClick"/>
		<scroll class="scroll" ref = "scroll"
			:probeType = "3" 
			:pullUpLoad = "true" 
			@scrollPosition="getScrollPosition"
			@pullingUp = "getMore">

			<home-swiper :banners="banners" @homeImageLoad = "homeImageLoad"/>
			<recommend-view :recommends="recommends"/>
			<feature-view />
			<tab-control :titles="['流行', '新款', '精选']" ref="tabControl2" @tabClick="tabClick"/>
			<goods-list :goods="showGoods" />
		</scroll>
		
		<back-top v-show="topisShow" ref="backTop" @click.native="topClick"/>
		
	</div>
</template>

<script>
	
	import HomeSwiper from './childComponents/HomeSwiper'
	import RecommendView from './childComponents/RecommendView'
	import FeatureView from './childComponents/FeatureView'
	
	import NavBar from 'components/common/navbar/NavBar'
	import TabControl from 'components/content/tabControl/TabControl'
	import GoodsList from 'components/content/goods/GoodsList'
	import Scroll from 'components/common/scroll/Scroll'
	import BackTop from 'components/content/backtop/BackTop'
	
	import {getHomeMultidata,getHomeGoods} from 'network/home'
	import {debounce} from 'common/utils'
	import {itemListenerMixin} from 'common/mixin'
	
	export default{
		name: 'Home',
		data() {
			return {
				banners: [],
				recommends: [],
				goods: {
					pop: {page: 0, list: []},
					new: {page: 0, list: []},
					sell: {page: 0, list: []},
				},
				currentType: 'pop',
				topisShow: false,
				tabControlHeight: 0,
				isMounting: false,
				scrollY: 0
			}
		},
		computed: {
			showGoods() {
				return this.goods[this.currentType].list
			}
		},
		components: {
			HomeSwiper,
			RecommendView,
			FeatureView,			
			NavBar,
			TabControl,
			GoodsList,
			Scroll,
			BackTop
		},
		created() {
			// 1.请求banner数据
			this.getHomeMultidata()
			
			// 2.请求商品数据
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')

		},
		activated() {
			this.$refs.scroll.backTop(0, this.scrollY, 0)
			this.$refs.scroll.refresh
		},
		deactivated() {
			this.scrollY = this.$refs.scroll.scrollY()
		},
		mixins: [itemListenerMixin],
		// mounted() {
		// 	// 监听图片加载完成
		// 	const refresh = debounce(this.$refs.scroll.refresh, 50)
		// 	this.$bus.$on('itemImageLoad', () => {
		// 		refresh()
		// 	})
		// },
		methods: {
			/**
			 * 点击事件的方法
			 */
			homeImageLoad() {
				// tabControl的高度
				this.tabControlHeight = this.$refs.tabControl2.$el.offsetTop
			},
			tabClick(index) {
				switch (index){
					case 0:
					this.currentType = 'pop'
						break;
					case 1:
					this.currentType = 'new'
						break;
					case 2:
					this.currentType = 'sell'
						break;
					default:
						break;
				}
				// 保持两个tabControl的状态一致
				this.$refs.tabControl1.currentIndex = index
				this.$refs.tabControl2.currentIndex = index
				
			},
			// 获取滑动距离
			getScrollPosition(position) {
				this.topisShow = -position.y > 500
				if(this.tabControlHeight < -position.y){
					this.isMounting = true
				}else{
					this.isMounting = false
				}
			},
			// 回到顶部
			topClick() {
				this.$refs.scroll.backTop()
			},
			// 加载更多数据
			getMore() {
				this.getHomeGoods(this.currentType)
			},
			
			/**
			 * 网络请求的方法
			 */
			getHomeMultidata() {
				getHomeMultidata().then((res) => {
					this.banners = res.data.banner.list
					this.recommends = res.data.recommend.list
				})
			},
			// 2.请求商品数据
			getHomeGoods(type) {
				const page = this.goods[type].page + 1
				getHomeGoods(type, page).then(res => {
					this.goods[type].list.push(...res.data.list)
					this.goods[type].page += 1
					this.$refs.scroll.finishPullUp()
				})
			},
			
		}
	}
</script>

<style>
	
	.home-nav{
		background-color: var(--color-tint);
		color: #fff;
	}
	
	.tab-control1{
		position: relative;
		top: 44px;
		z-index: 9;
	}
	
	.scroll{
		position: absolute;
		top: 44px;
		bottom: 49px;
		right: 0;
		left: 0;
		
		overflow: hidden;
	}
</style>
